<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="shortcut icon" href="../../image/oss/iot/favicon2.ico" type="image/x-icon" />
    <link rel="stylesheet" href="../../lib/element-ui/index.css" />
    <link rel="stylesheet" href="./css/index.css" />
    <script src="../common/util.js"></script>
    <script src="../../lib/bigscreen/js/vue.min.js"></script>
    <script src="../../lib/bigscreen/lib/jquery/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="../../lib/layer/layer.js"></script>
    <script src="../../lib/element-ui/index.js"></script>
	<title>视频列表</title>
</head>
<body>
	<div id="app" v-cloak >
		<div class="search">
			<el-form :inline="true" :model="param" class="demo-form-inline">
			  <el-form-item label="名称">
			    <el-input v-model="param.name" clearable placeholder="名称"></el-input>
			  </el-form-item>
			  <el-form-item label="项目名称">
			    <el-select v-model="param.scene_id" clearable placeholder="请选择">
				    <el-option
				      v-for="item in sceneData"
				      :key="item.id"
				      :label="item.name"
				      :value="item.id">
				    </el-option>
				 </el-select>
			  </el-form-item>
			  <el-form-item>
			    <el-button type="primary" @click="onSubmit">查询</el-button>
			  </el-form-item>
			</el-form>			
		</div>
		<div style="margin-top: 10px;">
			<el-row :gutter="20">
			  <el-col :span="3" class="self-width"  v-for="item in videoData"  >
		  		 <div class="video-container" @click="lokdetailInfo(item)" >
		  		 	<el-avatar :size="50" :src="circleUrl"></el-avatar>    
		  		 	<div style="margin-left: 15px;">
			  		 	<span style="display: inline-block;" >{{item.name}}</span>
		  		 		<span style="display: inherit;color: #666;font-size: 14px;" >{{item.scene_name}}</span>
		  		 	</div>
		  		 	
		  		 	<img style="height: 20px; margin-right:10px; margin-left: auto;" alt="" src="./imgs/arrow.png">
		  		 </div>
			  </el-col>
			</el-row>
		</div>
		<el-pagination
			  background
			  :hide-on-single-page="page_value"
			  layout="prev, pager, next"
			  :page-size="pageform.pageSize"
			  @current-change="changePage"
			  :total="pageform.totalCount">
			</el-pagination>
	</div>
	
	<script type="text/javascript">
		var app = new Vue({
			el: '#app' ,
			data: function(){
				return {
					param: {} ,  	  // 表单
					tableData: [],	  // 表格数据
					sceneData: [] ,	  // 项目信息
					circleUrl: './imgs/camera.png' ,
					searchContion: {} , // 查询条件
					videoData: [] ,	  // 摄像头信息
					page_value: true , // 页面隐藏
					pageform:{//分页参数
						pageSize:20,
						totalCount:0,  
						page:1, 
					},
				}
			},
			methods: {
				handleClick(access_id) {
			        // 权限管理
					layer.open({
					      type: 2,
					      title: '权限管理',
					      shadeClose: true,
					      shade: 0.4,
					      area: ['100%', '100%'],
					      content: baseurl + "/page/access/access_auth.html?id=" + access_id
					});
			    },
				onSubmit(){
					// 查询
					this.pageform.page = 1; 
					this.searchContion = $.extend({},this.param );
					this.initVideoInfo( this.param , this.pageform.page ) ;
				},
				changePage(page){ 
					this.pageform.page = page;
					this.initVideoInfo(this.param , this.pageform.page) ;
				}, 
				initVideoInfo(data, paged ){
					// 摄像头查询
					commonAjax('POST',baseurl+"/service/page/video?paged="+ paged +"&pageSize=" + this.pageform.pageSize , data ,function(res){
						if(isOk(res)){
							var dt = res.data.data ;
							app.videoData = dt ;
							app.pageform.totalCount = res.data.totalCount;
							if( res.data.totalCount > app.pageform.pageSize ){
								app.page_value = false ;
							}
						}else{
							app.page_value = true ;
							app.videoData = [] ;
						}
					});
				},
				initSceneData(data){
					// 项目查询
					commonAjax('POST',baseurl+"/service/page/scene?paged=1&pageSize=100", data ,function(res){
						if(isOk(res)){
							var dt = res.data.data ;
							app.sceneData = dt ;
						}
					});
				},
				lokdetailInfo(obj){
					layer.open({
					      type: 2,
					      title: '摄像头详情',
					      shadeClose: true,
					      shade: 0.4,
					      area: ['95%', '753px'],
					      content: baseurl + "/service/iot/video?id="+ obj.id +"&sid=" + obj.scene_id
					});
				}
			},
			created(){
				
			},
			mounted(){
				// 项目信息初始化
				this.initSceneData({});
				// 摄像头查询
				this.initVideoInfo( {} , 1 ) ;
				// 定时任务
				setInterval(function()  {
					app.initVideoInfo( app.searchContion , app.pageform.page ) ;
				}, 6000);
			}
		});
	</script>
</body>
	